<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <#assign base=request.contextPath  />
    <base id="base" href="${base}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, adminUser-scalable=0">
    <link rel="stylesheet" href="${base}/static/win10/component/layui/css/layui.css" media="all">
    <script>
        var base = "${base}";
    </script>
</head>
<body>
<br>
<form class="layui-form " action="">

    <div class="layui-form-item">
        <label class="layui-form-label">修理方法</label>
        <div class="layui-input-block" style="margin: 0">
            <div class="layui-input-inline" style="width: 160px">
                <select name="province" lay-filter="province" id="province">
                    <option value="">请选择修理项目</option>
                </select>
            </div>

            <div class="layui-input-inline" style="width: 160px">
                <select name="city" lay-filter="city" id="city">
                    <option value="">修理子项目</option>
                </select>
            </div>

            <div class="layui-input-inline" style="width: 160px">
                <select name="area" lay-filter="area" id="area">
                    <option value="">修理原因及目的</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 160px">
                <select name="street" lay-filter="street" id="street">
                    <option value="">修理科目</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 160px">
                <select name="method" lay-filter="method" id="method">
                    <option value="">修理方法</option>
                </select>
            </div>
        </div>
    </div>

<#--            <div class="layui-form-item">-->
<#--                <label class="layui-form-label">对应的原因</label>-->
<#--                <div class="layui-input-block">-->
<#--                    <input type="text" id="methodName" name="methodName" autocomplete="off" placeholder="请输入对应的修理原因"-->
<#--                           class="layui-input">-->
<#--                </div>-->
<#--            </div>-->


<#--    <div class="layui-form-item">-->
<#--        <label class="layui-form-label">发生频度</label>-->
<#--        <div class="layui-input-block">-->
<#--            <input type="text" id="moreFrequent" name="moreFrequent" autocomplete="off" placeholder="请输入发生频度"-->
<#--                   class="layui-input">-->
<#--        </div>-->
<#--    </div>-->

    <div class="layui-form-item">
        <label class="layui-form-label">发生频度</label>
        <div class="layui-input-block">
            <@dict_tag type="more_frequent">
                <select name="moreFrequent" lay-filter="moreFrequent" id="moreFrequent">

                    <#if dictList?? && dictList?size gt 0>
                        <#list dictList as dict>
                            <#if "${dict.k}"=="0">
                                <option value="${dict.k}" selected>${dict.val}</option>
                            <#else>
                                <option value="${dict.k}">${dict.val}</option>
                            </#if>
                        </#list>
                    </#if>
                </select>
            </@dict_tag>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">工具设备</label>
        <div class="layui-input-block">
            <input type="text" id="equipment" name="equipment" autocomplete="off" placeholder="请输入工具设备"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">耗材</label>
        <div class="layui-input-block">
            <input type="text" id="consumables" name="consumables" autocomplete="off" placeholder="请输入耗材"
                   class="layui-input">
        </div>
    </div>


    <#--        <div class="layui-form-item">-->
    <#--            <label class="layui-form-label">修理难度</label>-->
    <#--            <div class="layui-input-block">-->
    <#--                <input type="text" id="difficulty" name="difficulty" autocomplete="off" placeholder="请输入修理难度"-->
    <#--                       class="layui-input">-->
    <#--            </div>-->
    <#--        </div>-->


    <div class="layui-form-item">
        <label class="layui-form-label">修理难度</label>
        <div class="layui-input-block">
            <@dict_tag type="difficulty">
                <select name="difficulty" lay-filter="difficulty" id="difficulty">
<#--                    <option value="">请选择</option>-->
                    <#if dictList?? && dictList?size gt 0>
                        <#list dictList as dict>
                            <#if "${dict.k}"=="0">
                                <option value="${dict.k}" selected>${dict.val}</option>
                            <#else>
                                <option value="${dict.k}">${dict.val}</option>
                            </#if>
                        </#list>
                    </#if>
                </select>
            </@dict_tag>
        </div>
    </div>


<#--    <div class="layui-form-item">-->
<#--        <label class="layui-form-label">修理费用估计</label>-->
<#--        <div class="layui-input-block">-->
<#--            <input type="text" id="cost" name="cost" autocomplete="off" placeholder="请输入修理费用估计"-->
<#--                   class="layui-input">-->
<#--        </div>-->
<#--    </div>-->


    <div class="layui-form-item">
        <label class="layui-form-label">修理费用估计</label>
        <div class="layui-input-block">
            <@dict_tag type="cost">
                <select name="cost" lay-filter="cost" id="cost">
                    <#--                    <option value="">请选择</option>-->
                    <#if dictList?? && dictList?size gt 0>
                        <#list dictList as dict>
                            <#if "${dict.k}"=="0">
                                <option value="${dict.k}" selected>${dict.val}</option>
                            <#else>
                                <option value="${dict.k}">${dict.val}</option>
                            </#if>
                        </#list>
                    </#if>
                </select>
            </@dict_tag>
        </div>
    </div>




<#--    <div class="layui-form-item">-->
<#--        <label class="layui-form-label">修理级别</label>-->
<#--        <div class="layui-input-block">-->
<#--            <input type="text" id="level" name="level" autocomplete="off" placeholder="请输入修理级别"-->
<#--                   class="layui-input">-->
<#--        </div>-->
<#--    </div>-->



    <div class="layui-form-item">
        <label class="layui-form-label">修理级别</label>
        <div class="layui-input-block">
            <@dict_tag type="level">
                <select name="level" lay-filter="level" id="level">
                    <#--                    <option value="">请选择</option>-->
                    <#if dictList?? && dictList?size gt 0>
                        <#list dictList as dict>
                            <#if "${dict.k}"=="0">
                                <option value="${dict.k}" selected>${dict.val}</option>
                            <#else>
                                <option value="${dict.k}">${dict.val}</option>
                            </#if>
                        </#list>
                    </#if>
                </select>
            </@dict_tag>
        </div>
    </div>



    <div align="center">
        <button type="button" class="layui-btn" id="submit">保存</button>
    </div>
</form>

<script src="${base}/static/win10/component/layui/layui.js?t=1"></script>
<script src="${base}/static/win10/js/jquery-1.8.3.min.js?t=1"></script>
<script>
    layui.use(['table', 'form', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer, table = layui.table;


        var $form = $('form');






        $("#submit").on("click", function () {
            if (check() === false) {
                return;
            }

            var formDate = {
                structureId: $("#method").val(),
                methodName: $("#methodName").val(),
                moreFrequent: $("#moreFrequent").find("option:selected").text(),
                equipment: $("#equipment").val(),
                consumables: $("#consumables").val(),
                difficulty: $("#difficulty").find("option:selected").text(),
                cost: $("#cost").find("option:selected").text(),
                level: $("#level").find("option:selected").text(),
                createTime: $("#createTime").val(),
                updateTime: $("#updateTime").val()
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairMethod/admin/addRepairMethod",
                data: formDate,
                success: function (data) {
                    layer.msg(data.message)
                    if (data.code === 200) {
                        window.location.href = base + "/analyse/repairMethod/admin/main.html"
                    } else {

                    }
                }
            });
        })


        function check() {
            if ($("#method").val().length < 1) {
                layer.msg("请选择修理方法");
                return false;
            }
            // if ($("#methodName").val().length < 1) {
            //     layer.msg("请填写原因");
            //     return false;
            // }
            if ($("#moreFrequent").text().length < 1) {
                layer.msg("请输入发生频度");
                return false;
            }
            if ($("#equipment").val().length < 1) {
                layer.msg("请输入工具设备");
                return false;
            }
            if ($("#consumables").val().length < 1) {
                layer.msg("请输入耗材");
                return false;
            }
            if ($("#difficulty").text().length < 1) {
                layer.msg("请输入修理难度");
                return false;
            }
            if ($("#cost").text().length < 1) {
                layer.msg("请输入修理费用估计");
                return false;
            }
            if ($("#level").text().length < 1) {
                layer.msg("请输入修理级别");
                return false;
            }

        }


        //5级联动 方法调用
        loadProvince();

        form.on('select(province)', function (data) {
            var pid = data.value;

            if (pid.length > 0) {

                loadCity(pid);
            }
        })
        form.on('select(city)', function (data) {
            console.log(data)


            var pid = data.value;
            if (pid.length > 0) {

                loadArea(pid);
            }
        })
        form.on('select(area)', function (data) {
            var pid = data.value;
            if (pid.length > 0) {
                loadStreet(pid);
            }
        })
        form.on('select(street)', function (data) {
            var pid = data.value;
            if (pid.length > 0) {
                loadMethod(pid)
            }

        })

        //加载一级数据
        function loadProvince() {
            var formDate = {
                parentId: 0
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {
                    // console.log(data)
                    var clos = data.data;
                    var proHtml = '';
                    for (const p in clos) {
                        if (p == 0) {
                            proHtml += '<option value="' + clos[p].structureId + '" selected=selected>' + clos[p].structureName + '</option>';
                        } else {

                            proHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';
                        }
                    }
                    $("#province").append(proHtml);
                    form.render();//菜单渲染 把内容加载进去
                    loadCity(clos[0].structureId);
                }
            });
        }

        //加载二级
        function loadCity(pid) {


            var formDate = {
                parentId: pid
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {


                    //
                    // $form.find('select[name=area]').parent().hide();
                    // $form.find('select[name=street]').parent().hide();

                    $("#city").find('option').remove();
                    $("#area").find('option').remove();
                    $("#street").find('option').remove();
                    $("#method").find('option').remove();

                    //console.log(data)
                    var clos = data.data;
                    //    var cityHtml = '<option value="">修理子项目</option>';
                    var cityHtml = '';

                    for (const p in clos) {
                        cityHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';

                    }

                    $("#city").append(cityHtml);

                    //  $form.find('select[name=city]').html(cityHtml).parent().show();

                    form.render();//菜单渲染 把内容加载进去
                    loadArea(clos[0].structureId);
                }
            });
        }

        //加载三级
        function loadArea(pid) {
            var formDate = {
                parentId: pid
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {
                    // $form.find('select[name=street]').parent().hide();
                    $("#area").find('option').remove();
                    $("#street").find('option').remove();
                    $("#method").find('option').remove();
                    var clos = data.data;
                    //   var areaHtml = '<option value="">请选择县/区</option>';
                    var areaHtml = '';
                    for (const p in clos) {
                        areaHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';
                    }
                    $("#area").append(areaHtml);
                    // $form.find('select[name=area]').html(areaHtml).parent().show();
                    form.render();//菜单渲染 把内容加载进去
                    loadStreet(clos[0].structureId);
                }
            });
        }

        //4级
        function loadStreet(pid) {
            var formDate = {
                parentId: pid
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {


                    $("#street").find('option').remove();
                    $("#method").find('option').remove();

                    //console.log(data)
                    var clos = data.data;
                    //  var cityHtml = '<option value="">请选择街道</option>';
                    var cityHtml = '';
                    for (const p in clos) {
                        cityHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';
                    }
                    $("#street").append(cityHtml);
                    //  $form.find('select[name=street]').html(cityHtml).parent().show();
                    form.render();//菜单渲染 把内容加载进去
                    loadMethod(clos[0].structureId);
                }
            });
        }

        //5级
        function loadMethod(pid) {
            var formDate = {
                parentId: pid
            }
            $.ajax({
                type: "POST",
                url: base + "/analyse/repairStructure/admin/getASubset",
                data: formDate,
                success: function (data) {


                    $("#method").find('option').remove();

                    //console.log(data)
                    var clos = data.data;
                    //  var cityHtml = '<option value="">请选择街道</option>';
                    var cityHtml = '';
                    for (const p in clos) {
                        cityHtml += '<option value="' + clos[p].structureId + '">' + clos[p].structureName + '</option>';
                    }
                    $("#method").append(cityHtml);
                    //  $form.find('select[name=street]').html(cityHtml).parent().show();
                    form.render();//菜单渲染 把内容加载进去
                }
            });
        }
    });

</script>
</body>
</html>